<template>
    <div>
        <top :navNum = navNum></top>
        <div id="store">
            <div class="container">
                <div class="firstTitle">
                    <div class="head">
                        <div class="name">{{seller.name}}</div>
                        <div class='subHead'>
                            <ul class='starList'>
                                <star :score = seller.score size="36" instance='12' />
                            </ul>
                            <div class='name'>({{seller.distance}})</div>
                            <div class='sale'>月售{{seller.sellCount}}单</div>
                        </div>
                    </div>
                    <div class="collect">
                        <div class="layout-favorite"></div>
                        <div class="isCollect">已收藏</div>
                    </div>
                </div>
                <div class='commonInfo'>
                    <ul class='info'>
                        <li class='startPrice'>
                            <div class='up'>起送价</div>
                            <div class='down'><span>{{seller.minPrice}}</span> 元</div>
                        </li>
                        <li class='transPrice'>
                            <div class='up'>商家配送</div>
                            <div class='down'><span>{{seller.deliveryPrice}}</span> 元</div>
                        </li>
                        <li class='transTime'>
                            <div class='up'>平均配送时间</div>
                            <div class='down'><span>{{seller.deliveryTime}}</span>分钟</div>
                        </li>
                    </ul>
                </div>
                <div class='block'></div>
                <div class="notice">
                    <div class="title">公告和活动</div>
                    <div class='content'>
                        {{seller.bulletin}}
                    </div>
                    <ul class="noticeList">
                        <li class="reduce" v-for='item in seller.supports' :key='item.content'>
                            <!-- :type = item.type size = 16 -->
                            <bgIcon  :type = item.type size = 16 />
                            <div class='desc'>{{item.content}}</div>
                        </li>
                    </ul>
                </div>
                <div class='block'></div>
                <div class="pic">
                    <div class="title">商家实景</div>
                    <div class='imgList'>
                        <img :src="item" v-for="(item,index) in seller.pics" :key = index>
                    </div>
                </div>
                <div class='block'></div>
                <div class="shopInfo">
                    <div class="title">商家信息</div>
                    <ul class='shopInfoList'>
                        <li>该商家支持开发票,请在下单时填写好发票抬头</li>
                        <li>品类：其他菜系、包子粥店</li>
                        <li>地址：{{seller.address}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data() {
        return {
            navNum:3
        };
    },
    computed: {
        ...mapState(['seller'])
    },
    mounted() {},
    }
</script>
<style scoped>
    .container .firstTitle{
        margin:36rem;
        font-size: 20rem;
        color: rgba(7,17,27);
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgb(7,17,27,0.1)
    }
    .container .firstTitle .head .name{
        font-size: 28rem;
        line-height: 28rem;
        margin-bottom: 16rem;
    }
    .container .firstTitle .head .subHead{
        display: flex;
        padding-bottom: 36rem;
    }
    .container .firstTitle .head .subHead .starList{
        margin-right: 16rem;
    }
    .container .firstTitle .head .subHead .starList .starItem{
        height: 36rem;
        width: 36rem;
        margin-right: 10rem;
        background: url("./img/star36_on@2x.png") no-repeat;
        background-size: cover;
    }
    .container .firstTitle .head .subHead div{
        color: rgba(77,85,93);
        line-height: 36rem;
        margin-right: 24rem;
    }
    .container .firstTitle .collect .layout-favorite{
        font-size: 48rem;
        color: rgb(240,20,20);
        text-align: center;
        margin-bottom: 8rem;
    }
    .container .firstTitle .collect .isCollect{
        color: rgba(77,85,93);
        line-height: 20rem;
    }

    .container .commonInfo .info{
        display: flex;
        
    }
    .container .commonInfo .info li{
        margin: 36rem 0;
        width: 250rem;
        text-align: center;
        border-right: 1px solid rgb(7, 17, 27,0.1);
    }
    .container .commonInfo .info li:nth-child(3){
        border: none;
    }
    .container .commonInfo .info li .up{
        font-size: 20rem;
        color: rgb(147,153,159);
        line-height: 20rem;
        margin-bottom:8rem;
    }
    .container .commonInfo .info li .down{
        font-size: 20rem;
        color: rgb(7,17,27);
        line-height: 20rem;
        line-height: 48rem;
    }
    .container .commonInfo .info li .down span{
        font-size: 48rem;
    }

    .block{
        height: 36rem;
        background-color: #f3f5f7;
        border-bottom:1px solid rgb(7, 17, 27,0.1);
        border-top:1px solid rgb(7, 17, 27,0.1);
    }
    .notice{
        margin: 36rem 24rem 0;
    }
    .notice .title{
        font-size: 28rem;
        line-height: 28rem;
        margin-bottom: 16rem;
    }
    .notice .content{
        font-size: 24rem;
        font-weight: 200;
        color: rgb(240,20,20);
        line-height: 48rem;
        padding-bottom: 32rem;
        border-bottom:1px solid rgb(7, 17, 27,0.1);
    }
    .notice .noticeList li{
        display: flex;
        padding: 32rem 24rem;
        border-bottom:1px solid rgb(7, 17, 27,0.1);
        align-items: center;
    }
    .notice .noticeList :last-child{
        border-bottom:none;
    }
    .notice .noticeList li .bg{
        width: 32rem;
        height: 32rem;
        margin-right:12rem;
    }
    .pic{
        padding: 36rem 0 36rem 36rem;
    }
    .pic .title{
        font-size: 28rem;
        line-height: 28rem;
        margin-bottom: 24rem;
    }
    .pic .imgList{
        display: flex;
        overflow: hidden;
        overflow-x: auto;
        
    }
    .pic .imgList::-webkit-scrollbar{
        display:none
    }
    .pic .imgList img{
        width: 240rem;
        height: 180rem;
        margin-right: 12rem;
    }
    .shopInfo{
        padding: 36rem;
    }
    .shopInfo .title{
        font-size: 28rem;
        line-height: 28rem;
        padding-bottom: 24rem;
        border-bottom:1px solid rgb(7, 17, 27,0.1);

    }
    .shopInfo .shopInfoList li{
        padding: 32rem 24rem;
        font-size: 24rem;
        font-weight: 200;
        color: rgb(7,17,27);
        line-height: 32rem;
        border-bottom:1px solid rgb(7, 17, 27,0.1);
    }
</style>